<template>
    <div id="myHeader" class="content">
        <div class="h2"><img src="@/assets/logo.png" alt="logo" /><span>舆情监控系统</span></div>
        <div class="myTittle">
            <div class="min"><button @click='min'><img src="../assets/min.png" alt="min.png" /></button></div>
            <div class="max"><button @click='max'><img src="../assets/max.png" alt="min.png" /></button></div>
            <div class="close"><button @click='close'><img src="../assets/close.png" alt="min.png" /></button></div>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {

            }
        },
        methods: {
            min() {
                this.$electron.ipcRenderer.send('window-min');
            },
            max() {
                this.$electron.ipcRenderer.send('window-max');
            },
            close() {
                this.$electron.ipcRenderer.send('window-close');
            }
        }
    }
</script>

<style lang="scss" scope>
    * {
        margin: 0;
        padding: 0;
    }

    button {
        background-color: #F5F6F7;
        border: none;
        //  去掉被点击时，显示的默认效果
        outline: 0 none !important;
        -webkit-tap-highlight-color: transparent;
    }

    button:hover {
        background-color: #BCBDBE;
    }

    #myHeader {
        position: relative;
        width: 100%;
        height: 30px;
        line-height: 30px;
        background-color: #F5F6F7;
        // 加入下面一句CSS代码表示  窗口可以拖拽，也就按住鼠标左键可以移动窗口
        -webkit-app-region: drag;

        .h2 {
            display: inline-block;
            height: 30px;
            padding-left: 8px;
            color: #333;
            font: {
                family: "楷体";
                size: 16px;
            }

            img {
                height: 80%;
                padding-top: 3px;
            }

            span {
                position: absolute;
                top: 0;
                padding-left: 10px;

            }
        }
    }

    .myTittle {
        position: relative;
        width: 200px;
        height: 30px;
        line-height: 30px;
        float: right;
        // 加入下面一句CSS代码表示  表示窗口不可以拖拽
        -webkit-app-region: no-drag;

        .min {
            position: absolute;
            right: 85px;
            width: 20px;

            img {
                width: 100%;
                margin-top: 6px;
            }
        }

        .max {
            position: absolute;
            right: 45px;
            width: 20px;

            img {
                width: 100%;
                margin-top: 6px;
            }

        }

        .close {
            position: absolute;
            right: 5px;
            width: 20px;

            img {
                width: 100%;
                margin-top: 6px;
            }
        }
    }
</style>